<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mkoa_Mdrag</title>
<script src="jQuery.js"></script>
<script src="jQuery.conment.js"></script> 
<script src="layer/layer.js"></script>
<script type="text/javascript" src="Mdrag.js"></script>
<script src="avalon.js"></script>
<script src="avalon_exp.js"></script>
<link rel="stylesheet" href="animate.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
*{padding: 0;margin: 0;}
.mdrag-box {transform: rotate(0deg); transform-origin:50% 50%; width: 200px; height: 100px; cursor: move; position: absolute; top: 30px; left: 30px;   }
.mdrag-show{border: 1px solid #09C;}
.mdrag-cl{cursor: crosshair;display: none;}
.mdrag-show .mdrag-cl{display: block;}
.mdrag-change{ width: 6px; height: 6px;border: 1px solid #fff; overflow: hidden;  position: absolute; background-color: #09C; }
.mdrag-rt{right: 0; top: 0;margin-top: -4px;margin-right: -4px;}
.mdrag-lt{left: 0; top: 0;  margin-left: -4px;  margin-top: -4px;}
.mdrag-rb{right: 0; bottom: 0;  margin-right: -4px;  margin-bottom: -4px; }
.mdrag-lb{left: 0; bottom: 0;  margin-left: -4px;  margin-bottom: -4px;}
.mdrag-t{ top: 0;left: 50%;margin-left: -3px;margin-top: -4px;}
.mdrag-b{ bottom: 0;left: 50%;margin-left: -3px;margin-bottom: -4px;}
.mdrag-r{top: 50%;right: 0;margin-top: -3px;margin-right: -4px;}
.mdrag-l{top: 50%;left: 0;margin-top: -3px;margin-left: -4px;}
.mdrag-rotate{
    top: 0;border-radius: 10px;border: 1px solid #fff;  margin-left: -6px;  position:absolute;  margin-top:-30px;left:50%;width:10px; height:10px;background-color:#ff6633;  cursor:pointer;
}
.mdrag-body{position: relative;width: 100%;height: 100%;background-position: center;background-size: cover ;border: 1px;overflow: hidden;}
.mdrag-delete{top: 0;border-radius: 10px;border: 1px solid #fff;  margin-left: -6px;  position:absolute;  margin-top:-30px;left:50%;width:10px; height:10px;background-color:#ff6633;  cursor:pointer}
body { background-color: #F3F3F3; }
#box{width: 600px;  height: 500px;  background-color: #ccc;overflow: hidden;position: absolute;margin-top: 5px; background-position: center;background-size: cover;
    margin-left: 5px;}
#hh{}
.r{position: relative;}
.menu{height: 500px;width: 300px;margin-top: 5px;margin-left: 610px; background: #e0ecf3;}
.bnt{height: 40px;margin-left: 2px;margin-top: 30px;background: #08aafc;border-radius:10%}
</style>
</head>
<body>
<!--右键弹出内容-->
<div class="contextMenu" id="myMenu2">
        <ul>
          <li id="item_3">删除</li>
        </ul>
</div>
<!--内容-->
<div ms-controller="Mdrag">
<button class="bnt" ms-click="add(1)">增加一个div</button>
<button class="bnt" ms-click="add(2)">增加一个文本框</button>
<button class="bnt" id="photos" >更改图片</button>
<button class="bnt" id="backgroundPhoto" >更改背景图片</button>
<div id="box" ms-css-background-image="'url('+backgroundPhoto+')'">
<div class="mdrag-box" ms-repeat="Mdrag" ms-css-width= "el.w"  ms-css-height= "el.h"  ms-css-left="el.left" ms-css-top="el.top" ms-data-rotate=" el.rotate" ms-click="click1(el)" >
<div class="mdrag-body" ms-css-opacity="el.body.opacity" ms-css-background-image="'url('+el.body.img+')'" ms-css-border-style="el.body.borderStyle" ms-if-loop="el.body.type==1" ms-css-border-color="el.body.borderColor" ms-css-border-radius="+el.body.borderRadius+'%'" ms-css-border-width="el.body.borderWidth" ms-class="animated {{el.body._flash}}" ms-css-animation-duration="+el.body.animationDuration+'s'" ms-css-animation-delay="+el.body.animationDelay+'s'" ms-css-animation-iteration-count="el.body.iterationCount" ms-css-display="el.body._display"></div>
<div class="mdrag-body" ms-css-opacity="el.body.opacity" ms-css-background-color="el.body.background" ms-attr-contenteditable="true" ms-css-font-size="el.body.size" ms-css-font-family="el.body.fontFamily" ms-css-font-style="el.body._fontStyle" ms-css-font-weight="el.body.fontWeight" ms-css-color="el.body.color" ms-css-border-style="el.body.borderStyle" ms-css-border-color="el.body.borderColor" id="demo2" ms-css-border-radius="+el.body.borderRadius+'%'" ms-if-loop="el.body.type==2" ms-css-border-width="el.body.borderWidth" ms-class="animated {{el.body._flash}}" ms-css-animation-duration="+el.body.animationDuration+'s'" ms-css-animation-delay="+el.body.animationDelay+'s'" ms-css-animation-iteration-count="el.body.iterationCount"ms-css-display="el.body._display">点击此处进行编辑</div>
</div>
</div>
<div class="menu">
  <p class="menu_head"  style="background-color:#0066FF;height:40px;font-size:30px;width:300px;color:white;border-radius:5%">基本样式</p>
  <div class="menu_body">
    <div style="background-height:30px;font-size:20px;width:300px;color:gray;">
      改变透明度:<input type='range' value='100' onchange='ChangeOpacity(this.value)'></br></br>
    </div>
    <div style="background-height:30px;font-size:20px;width:300px;color:gray;">
      改变边框弧度：<input type='range' value='0' max='50' onchange='Change2(this.value,"borderRadius");'/>
    </div></br>
    <div style="background-height:30px;font-size:20px;width:300px;color:gray;"> 
      改变边框尺寸：<input type='range' value='4' max='20' onchange='Change2(this.value,"borderWidth");'>
    </div>
      <div style="background-height:30px;font-size:20px;width:300px;color:gray;"></div></br>
      <div style="background-height:30px;font-size:20px;width:300px;color:gray;">
        改变边框：
        <select  onchange='Change1(this,"borderStyle");'>
          <option>solid</option>
          <option>dotted</option>
          <option>dashed</option>
          <option>double</option>
          <option>groove</option>
          <option>ridge</option>
          <option>inset</option>
          <option>outset</option>
          <option selected='selected'>none</option>
        </select>
      </div></br>
      <div style="background-height:30px;font-size:20px;width:300px;color:gray;">改变边框颜色:
        <select  onchange='Change1(this,"borderColor");'>
          <option>yellow</option>
          <option>blue</option>
          <option>red</option>
          <option>green</option>
          <option>white</option>
          <option>gray</option>
          <option selected='selected'>black</option>
        </select>
      </div>
    </div>
    <div style="background-color:white;height:4px;"></div>
      <p class="menu_head" style="background-color:#0066FF;height:40px;font-size:30px;width:300px;color:white;border-radius:5%">字体</p>
    <div class="menu_body" style="display:none;">
      <div style="background-height:30px;font-size:20px;width:300px;color:gray;">改变字体大小:
        <select onchange='Change1(this,"size");'>
          <option>12</option>
          <option>16</option>
          <option selected='selected'>20</option>
          <option>24</option>
          <option>30</option>
          <option >40</option>
        </select>
      </div></br>
      <div style="background-height:30px;font-size:20px;width:300px;color:gray;">改变字体背景颜色：
        <select  onchange='Change1(this,"background");'>
          <option>yellow</option>
          <option>blue</option>
          <option>red</option>
          <option>green</option>
          <option>white</option>
        </select>
      </div></br>
      <div style="background-height:30px;font-size:20px;width:300px;color:gray;">改变字体：
        <select  onchange='Change1(this,"fontFamily");'>
          <option name='PMingLiU'>新細明體</option>
          <option name='FangSong'>仿宋</option>
          <option name='SimHei'>黑体</option>
          <option selected='selected' name='SimSun'>宋体</option>
          <option name='KaiTi'>楷体</option>
          <option name='Microsoft JhengHei'>微軟正黑體</option>
        </select>
      <button value='italic' onclick='Change2(this.value,"_fontStyle")'>斜体</button>
      <button value='bold' onclick='Change2(this.value,'fontWeight')'>加粗</button>
    </div></br>
    <div style="background-height:30px;font-size:20px;width:300px;color:gray;">改变字体颜色：
      <select  onchange='Change1(this,"color");'>
        <option>yellow</option>
        <option>blue</option>
        <option>red</option>
        <option>green</option>
        <option>white</option>
        <option selected='selected'>black</option>
      </select>
    </div>
  </div>
  <div style="background-color:white;height:4px;"></div>
    <p class="menu_head" style="background-color:#0066FF;height:40px;font-size:30px;width:300px;color:white;border-radius:5%">添加动画
    </p>
    <div class="menu_body" style="display:none;"> 
      <div style="background-height:30px;font-size:20px;width:300px;color:gray;">方式:
        <select  onchange='Change1(this,"_flash");'>
          <option selected='selected'>none</option>
          <option disabled="disabled" style="font-size:16px;color:black;">强调</option>
          <option>jello</option>
          <option>tada</option>
          <option>swing</option>
          <option>flash</option>
          <option>bounce</option>
          <option>shake</option>
          <option>rubberBand</option>
          <option>flip</option>
          <option disabled="disabled" style="font-size:16px;color:black;">进入</option>
          <option>bounceInUp</option>
          <option>zoomIn</option>
          <option>bounceInDown</option>
          <option>fadeInLeft</option>
          <option >fadeInDown</option>
          <option>fadeInRight</option>
          <option>fadeInUp</option>
          <option>lightSpeedIn</option>
          <option>rotateIn</option>
          <option>slideInDown</option>
          <option>slideInLeft</option>
          <option>rollIn</option>
          <option disabled="disabled" style="font-size:16px;color:black;">退出</option>
          <option>bounceOutRight</option>
          <option>bounceOutDown</option>
          <option>fadeOutDown</option>
          <option>fadeOutRight</option>
          <option>fadeOutUp</option>
          <option>fadeOutLeft</option>
          <option>flipOutY</option>
          <option>lightSpeedOut</option>
          <option>rotateOut</option>
          <option>slideOutRight</option>
          <option>slideOutDown</option>
          <option>zoomOutDown</option>
          <option>zoomOutUp</option>
          <option>rollOut</option>
        </select>
      </div></br>
      <div style="background-height:30px;font-size:20px;width:300px;color:gray">持续时间：
        <input type="number" value='1'  min='1' max='20' onchange='Change2(this.value,"animationDuration");'/>
      </div></br>
      <div style="background-height:30px;font-size:20px;width:300px;color:gray;">延迟时间：
        <input type="number" value='0'  min='0' max='20' onchange='Change2(this.value,"animationDelay");'/>
      </div></br>
      <div style="background-height:30px;font-size:20px;width:300px;color:gray;">循环次数:
        <input type="number" value='0'  min='0' max='20' onchange='Change2(this.value,"iterationCount");'/>
      </div></br>
      <button onmousedown="mDown()" onmouseup="mUp()" style="font-size:20px;width:140px;height:50px;background-color:#0066FF;color:white;border-radius:15%">预览动画</button>
      <button  onclick="Del()" style="font-size:20px;width:140px;height:50px;background-color:#0066FF;color:white;border-radius:15%">删除动画</button>
  </div>
</div>
</div>
<script src="jQuery_exp.js"></script>
</body>
</html> 